<script type="text/javascript" src="/js/pages/permEdit.js"></script>
<th:block layout:include="fragments/ui :: main (title='权限详细')">
    <th:block layout:fragment="main-breadcrumb">
        <li><a href="#/perm.html"><i class="fa fa-user"></i> 权限列表</a></li>
        <li class="active" th:text="${title}"></li>
    </th:block>
    <th:block layout:fragment="main-content">
        <th:block layout:include="fragments/ui :: box (title='权限详细', iconClass='fa-bars')">
            <th:block layout:fragment="box-content">
                <form id="updatePermForm" class="form-horizontal" method="post">
                    <input type="hidden" class="form-control" id="id" name="id" placeholder="id" th:value="${perm.id}" />
                    <div class="form-group">
                        <label for="type" class="col-sm-2 control-label">类型</label>
                        <div class="col-sm-4">
                            <select id="type" name="type" class="form-control">
                                <option value="menu" th:selected="${#strings.equals(perm.type, 'menu')}">菜单</option>
                                <option value="opt" th:selected="${#strings.equals(perm.type, 'opt')}">操作</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">名称</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="name" name="name" placeholder="名称" th:value="${perm.name}" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="info" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="info" name="info" placeholder="描述" th:value="${perm.info}" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-4">
                            <select id="status" name="status" class="form-control">
                                <option value="normal" th:selected="${#strings.equals(perm.status, 'normal')}">正常</option>
                                <option value="forbidden" th:selected="${#strings.equals(perm.status, 'forbidden')}">禁用</option>
                                <option value="deleted" th:selected="${#strings.equals(perm.status, 'deleted')}">删除</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label"></label>
                        <div class="col-sm-4">
                            <a href="javascript:void(0)" class="btn btn-primary update-btn"><i class="fa fa-check"></i> 保存</a>
                            <a href="javascript:window.history.go(-1)" class="btn btn-default"><i class="fa fa-arrow-left"></i> 返回</a>
                        </div>
                    </div>
                </form>
            </th:block>
        </th:block>

        <th:block layout:include="fragments/ui :: box (title='角色列表', iconClass='fa-bars')">
            <th:block layout:fragment="box-content">
                <a type="button" class="btn btn-success add_btn"><i class="fa fa-plus"></i> 选择角色</a>
                <div th:include="fragments/ajax-table :: ajax-table (id=PermRoleList, head=${ {'ID', '角色名称', '描述', '状态'} }, ajaxurl=${'/perm/' + perm.id + '/role'})"></div>
            </th:block>
        </th:block>
    </th:block>
</th:block>

<!-- add Modal -->
<div class="modal fade" id="addRoleModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">选择角色</h4>
            </div>
            <div class="modal-body">
                <div th:include="fragments/ajax-table :: ajax-table (id=PermRoleSelectList, head=${ {'ID', '角色名称', '描述', '状态'} }, ajaxurl='/role')"></div>
            </div>
        </div>
    </div>
</div>